import React from 'react'
import { Card,Table,Button,Popconfirm} from 'antd'

let dataSource;

let url = 'https://www.304cloud.top:4321/getarticlelist';
        fetch(url)
        .then(res=>res.json())
        .then(res=>{
            dataSource = res.data
        })

const Article = () => {
    const columns = [
        {
            title:'作品id',
            key:'article_id',
            width:50,
            align:'center',
            dataIndex:'article_id'
        },
        {
            title:'作品标题',
            dataIndex:'article_title',
            align:'center',
            width:110,
        },
        {
            title:'作品内容',
            dataIndex:'article_txt',
            align:'left',
            width:150,
        },
        {
            title:'发布时间',
            dataIndex:'article_time',
            align:'center',
            width:150,
        },
        {
            title:'发布者',
            dataIndex:'poster_id',
            align:'center',
            width:200,
        },
        {
            title:'作品配图',
            width:150,
            dataIndex:'article_img',
            align:'center',
            render:(txt,record) => record.article_img ? (<img src={"https://www.304cloud.top:4321"+record.article_img} alt={record.name} style={{width:"40px"}}/>
            ):(
                "暂无图片"
            )
        },
        {
            title:'操作',
            width:120,
            align:'center',
            render:(txt,record,index)=>{
                return(
                    <div>
                        <Popconfirm title="确定删除此项？" 
                        onCancel={()=>console.log('用户取消删除')} 
                        onConfirm={()=>{
                            console.log('用户确定删除');
                            //此处调用删除api
                            let del_id = record.article_id
                            //此处调用删除api
                            let url = 'https://www.304cloud.top:4321/manadelarticle';
                            fetch(url,{
                                method:'POST',
                                headers:{
                                    'Content-Type' : 'multipart/form-data'
                                },
                                body:JSON.stringify({'article_id':del_id})
                            })
                            .then(res=>{
                                console.log(res)
                            })
                        }}
                        >
                            <Button style={{margin:"0 0.3rem"}} type="danger" size="small">删除</Button>
                        </Popconfirm>
                    </div>
                )
            }
        },
    ]
    return (
        <Card title="作品列表">
            <Table pagination={{defaultPageSize:3}} columns={columns} bordered dataSource={dataSource}/>
        </Card>
    )
}

export default Article
